<template>
  <div class="search-condition">
    <a-form
      :form="form"
      layout="inline"
      @submit="handleSearch"
      class="form"
    >
      <div>
        <a-form-item
          label="账号"
        >
          <a-input
            v-decorator="[
              'account'
            ]"
          />
        </a-form-item>
        <a-form-item
          label="状态"
        >
          <a-select
            style="width: 200px"
            v-decorator="[
              'status',
              {'initialValue': ''}
            ]"
          >
            <a-select-option value="">
              全部
            </a-select-option>
            <a-select-option value="1">
              正常
            </a-select-option>
            <a-select-option value="0">
              注销
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <div class="search-btn">
            <a-button type="primary" icon="search" style="margin-right: 10px;" html-type="submit">搜索</a-button>
            <a-button icon="reload" style="margin-right: 10px;" @click="handleReset">重置</a-button>
          </div>
        </a-form-item>
      </div>
    </a-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: this.$form.createForm(this),
      list: []
    }
  },
  components: {},
  methods: {
    handleSearch (e) {
      e.preventDefault()
      this.handleFormData()
    },
    handleReset () {
      this.form.resetFields()
      this.handleFormData()
    },
    handleFormData () {
      this.form.validateFields((error, fieldsValue) => {
        const values = {
          ...fieldsValue
        }
        this.$emit('changeSearch', values)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.search-condition {
  margin-bottom: 32px;
  .form {
    // @include flex(space-between);
    flex-wrap: wrap;
    .search-form {
    //   @include flex(space-between);
    }
    .muti-date-pick {
    //   @include flex();
    }
    .search-btn {
      // margin: 16px 0;
      text-align: right;
    }
  }

}
</style>
